<!DOCTYPE html>

<head>
    <title>PyntCloud</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #cccccc;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
            background-color: #050505;
            margin: 0px;
            overflow: hidden;
        }

        #logo_container {
            position: absolute;
            top: 0px;
            width: 100%;
        }

        #PyntCloudLogo {
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img id="PyntCloudLogo" src="pyntcloud_plot_assets/pyntcloud_logo.png">
    </div>

    <div id="container">
    </div>

    <script src="pyntcloud_plot_assets/three.min.js"></script>
    <script src="pyntcloud_plot_assets/Detector.js"></script>
    <script src="pyntcloud_plot_assets/OrbitControls.js"></script>
    <script src="pyntcloud_plot_assets/stats.min.js"></script>
    <script src="pyntcloud_plot_assets/jquery.min.js"></script>
    <script src="pyntcloud_plot_assets/PLYLoader.js"></script>

    <script>
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        var container, stats;
        var camera, scene, renderer;
        var points;

        init();
        animate();

        function init() {

            var camera_x = CAMERA_X_PLACEHOLDER;
            var camera_y = CAMERA_Y_PLACEHOLDER;
            var camera_z = CAMERA_Z_PLACEHOLDER;

            var look_x = LOOK_X_PLACEHOLDER;
            var look_y = LOOK_Y_PLACEHOLDER;
            var look_z = LOOK_Z_PLACEHOLDER;

            var X = new Float32Array(POINTS_X_PLACEHOLDER);
            var Y = new Float32Array(POINTS_Y_PLACEHOLDER);
            var Z = new Float32Array(POINTS_Z_PLACEHOLDER);

            var R = new Float32Array(R_PLACEHOLDER);
            var G = new Float32Array(G_PLACEHOLDER);
            var B = new Float32Array(B_PLACEHOLDER);

            var S_x = S_x_PLACEHOLDER;
            var S_y = S_y_PLACEHOLDER;
            var S_z = S_z_PLACEHOLDER;

            var n_voxels = N_VOXELS_PLACEHOLDER;
            var axis_size = AXIS_SIZE_PLACEHOLDER;

            container = document.getElementById('container');

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = camera_x;
            camera.position.y = camera_y;
            camera.position.z = camera_z;
            camera.up = new THREE.Vector3(0, 0, 1);

            if (axis_size > 0) {
                var axisHelper = new THREE.AxisHelper(axis_size);
                scene.add(axisHelper);
            }

            var geometry = new THREE.BoxGeometry(S_x, S_y, S_z);

            for (var i = 0; i < n_voxels; i++) {
                var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial());
                mesh.material.color.setRGB(R[i], G[i], B[i]);
                mesh.position.x = X[i];
                mesh.position.y = Y[i];
                mesh.position.z = Z[i];
                scene.add(mesh);
            }

            renderer = new THREE.WebGLRenderer({ antialias: false });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);

            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target.copy(new THREE.Vector3(look_x, look_y, look_z));
            camera.lookAt(new THREE.Vector3(look_x, look_y, look_z));

            container.appendChild(renderer.domElement);

            window.addEventListener('resize', onWindowResize, false);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            renderer.render(scene, camera);
        }

    </script>
</body>

</html>